<template>
  <div class="department-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <!-- 按钮 -->
          <div>
            <el-button type="primary" @click.native="addPeopleBtn">新增</el-button>
          </div>
          <!-- table表格的位置 -->
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="50"
              />
              <el-table-column
                prop="date"
                label="日期"
                width="180"
              />
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="address"
                label="地址"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="400"
              >
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="assignPremission(scope.row.id)">分配权限</el-button>
                  <el-button type="success" size="mini" @click.native="editRoleBtn(scope)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="delRoleBtn(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagin-wrap">
            <el-pagination
              :current-page.sync="form.page"
              :page-sizes="[2, 10, 30, 40]"
              :page-size="form.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @close="dialogClosBtn"
              @size-change="handleSizeChange"
              @current-change="hCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

      </el-tabs>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :title="isEdit ? '编辑角色' : '新增角色'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="formDialogRef" :rules="rules" :model="formDialog" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formDialog.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formDialog.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="onSubmit">{{ isEdit ? '编辑' : '新增' }}</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 分配角色的权限弹窗 -->
    <el-dialog
      v-if="roleDialogVisble"
      title="分配角色"
      :visible.sync="roleDialogVisble"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <!-- 多选框组件 -->
      <AssionPremission :role-dialog-visble="roleDialogVisble" :current-id="currentId" @close="eventClose" />
    </el-dialog>
  </div>
</template>

<script>
import { getRolesListRequest, addRolesListRequest, updateRolesRequestById, delRolesRequestById } from '@/api/setting'
import _ from 'lodash'
import AssionPremission from './AssignPremission.vue'

export default {
  // 为了在vue-tools里面查找组件，一般会给组件写个唯一的名称
  name: 'SettingsCom',
  components: {
    AssionPremission
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      total: 0,
      form: {
        page: 1,
        pagesize: 10
      }, // 表单页面当前数据，页数和页面最大列数      、
      dialogVisible: false,
      formDialog: {
        name: '',
        description: ''
      },
      isEdit: false, // 是否为编辑状态
      roleDialogVisble: false,
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ],
        description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
      },
      currentId: ''
    }
  },
  computed: {
    // 最大页码数
    maxPageNum() {
      return Math.ceil(this.total / this.form.pagesize)
    },
    // 最后一页是否为满的
    isLastPageFull() {
      return this.total % this.form.pagesize === 0
    }
  },
  created() {
    this.getRolesList()
    // 这里加不加 await 都可以， 取决于下面代码是否依赖上面代码的完成
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.form.page = 1
      this.form.pagesize = val
      this.getRolesList()
    },
    hCurrentChange(curPage) {
      console.log(curPage)
      // 1. 更新页码
      this.form.page = curPage
      // 2. 重发请求
      this.getRolesList()
    },
    // 获得列表
    async getRolesList() {
      try {
        const res = await getRolesListRequest(this.form)
        // console.log(res)
        if (res.success) {
          this.tableData = res.data.rows
          this.total = res.data.total
        } else {
          // 如果请求成功，但是业务失败
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('获取角色列表失败')
        this.$message.error('获取角色列表失败')
      }
    },
    addPeopleBtn() {
      this.dialogVisible = true
      // 改为新增状态
      this.isEdit = false
      // 新增时清空表单
      this.formDialog = this.$options.data().formDialog
    },
    // 点击确认
    onSubmit() {
      // 基础校验通过才能发请求
      this.$refs.formDialogRef.validate(val => {
        if (val) {
          if (this.isEdit) {
            // 调用编辑
            this.updateRolesById()
          } else {
            // 调用新增
            this.addRolesList()
          }
        }
      })
    },
    async addRolesList() {
      try {
        const res = await addRolesListRequest(this.formDialog)
        // console.log(res)
        if (res.success) {
          // 如果最后一页已经满了，那么应该将总数量添加1，在跳转到下一页
          if (this.isLastPageFull) {
            this.form.page = this.maxPageNum + 1
            this.total++
          } else {
            this.form.page = this.maxPageNum
          }
          // 业务代码的成功
          // 1 关闭弹框  2. 刷新后面的列表页面
          this.dialogVisible = false
          this.getRolesList()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        this.$message.error('添加角色失败')
        console.log('添加角色失败', err)
      }
    },
    // 点击编辑数据回显
    editRoleBtn(scope) {
      // 开启模态框
      this.dialogVisible = true
      // 模态框状态为编辑
      this.isEdit = true
      // 数据回显
      // 深拷贝的
      this.formDialog = _.cloneDeep(scope.row)
      // this.formDialog = scope.row
    },
    // 编辑角色的异步请求
    async updateRolesById() {
      try {
        await updateRolesRequestById(this.formDialog)
        this.dialogVisible = false
        this.getRolesList()
      } catch (error) {
        console.log(error)
      }
    },
    // 所有关闭模态框的情况都触发
    dialogClosBtn() {
      console.log('模态框关闭')
      // 既可以清除表单校验，又可以初始化数据
      this.$refs.formDialogRef.resetFields()
      if (this.isEdit) this.formDialog = this.$options.data().formDialog
    },
    // 点击删除
    delRoleBtn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delRolesById(id)
        // 下面这个提示，地方不对，应该是删除请求成以后，在给提示
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除请求
    async delRolesById(id) {
      try {
        const res = await delRolesRequestById(id)
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除请求成功'
          })
          // 删除完成，如果当前页面只剩最后一条数据，则让当前的页数减1
          if (this.tableData.length === 1) {
            this.form.page--
            // 如果当前页面的页数只剩1页，则强制让当前页面为第一页
            if (this.form.page <= 0) this.form.page = 1
          }
          this.getRolesList()
        }
      } catch (error) {
        this.$message({
          type: 'info',
          message: '删除请求失败'
        })
      }
    },
    // 点击分配权限
    assignPremission(id) {
      this.roleDialogVisble = true
      this.currentId = id
    },
    // 子组件点击取消，关闭弹出框
    eventClose() {
      this.roleDialogVisble = false
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  border: 1px solid red;
  ::v-deep .btn-wrap {
    margin: 15px 0;
  }
  .pagin-wrap {
    margin-top: 15px;
    text-align: right;
  }
}
</style>
